<template>
	<div class="bg-color-gray">

		<!-- 侧边导航+焦点图+用户信息 start -->
		<div class="main-type-swiper-info">

			<div class="main-width">
				<div class="main-swiper-container">
					<div class="main-type" @mouseleave="popupClose">
						<ul>
							<li v-for="item in categoryData" @mouseenter="popupInit(item.id)">
								<router-link tag="a" :to="{name: 'Category', query: { levelOne: item.id, levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: '' }}">
									<span class="main-type-icon" v-bind:style="{backgroundImage:'url('+imgAddress+item.iconPath+')'}"></span>
									{{item.name}}
								</router-link>
							</li> 
						</ul>
						<div class="main-popup" :class="{ 'display-none' : isActive }">
							<div>
								<div class="main-popup-item" v-for="item in popupData">
									<div class="main-popup-category">
										<router-link tag="a" :to="{name: 'Category', query: { levelOne: item.parentId, levelTwo: item.id, levelThree: '', keyWord: '', selectType: '', brandId: '' }}" >{{item.name}}</router-link>
									</div>
									<ul class="main-popup-category-child">
										<li v-for="child in item.child" >
											<router-link tag="a" :to="{name: 'Category', query: { levelOne: item.parentId, levelTwo: child.parentId, levelThree: child.id, keyWord: '', selectType: '', brandId: '' }}">{{child.name}}</router-link>
										</li>
									</ul>
								</div>
							</div>
						</div> 
					</div>
					<div class="main-swiper">
						<div class="swiper-container" ref="slider">
					        <div class="swiper-wrapper">
					      		<div class="swiper-slide" v-for="slider in sliders">
					      			<router-link tag="a" v-if="slider.type == 1" :to="{name: 'Detail', query: {goodsId: slider.activity}}">
					      				<img :src="imgAddress + slider.image" @error="error(2)">
					      			</router-link>
					      			<a v-else-if="slider.type == 3" :href="slider.activity">
					      				<img :src="imgAddress + slider.image" @error="error(2)">
					      			</a>
					      			<a v-else>
					      				<img :src="imgAddress + slider.image" @error="error(2)">
					      			</a>					      			
					      		</div>
					        </div>						        
					        <div class="swiper-pagination"></div>						       
					        <div class="swiper-button-next swiper-button-white" :class="{'display-none': arowDisplay}"></div>
					        <div class="swiper-button-prev swiper-button-white" :class="{'display-none': arowDisplay}"></div>
					    </div>
					</div>
					<div class="main-info" id="settleInfor">
						<div>
							<div class="main-photo">
								<img :src="imgAddress + logoPath" @error="error(4)"/>
							</div>
							<div class="main-name">
								您好，
								<span>{{accountInfo.account}}</span>
								<span class="layout" @click="layout">退出</span>
							</div>
							<div class="main-wel">欢迎进入贡云选货商城！</div>
							<div class="main-data">
								<span>{{accountInfo.enterBrandCount}}</span>
								家品牌入驻
							</div>
							<div class="main-data">
								<span>{{accountInfo.enterSKUCount}}</span>
								件SKU入驻
							</div>
							<div class="main-data">
								<span>{{accountInfo.enterPlatformCount}}</span>
								家第三方选货
							</div>
						</div>
					</div>
					<div class="main-logo-wrap">
						<ul class="main-logo">
							<li v-for="item in logo">
								<img :src="item.path"  />
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 侧边导航+焦点图+用户信息 end -->

		<!-- 商品轮播图 start -->
		<div class="main-goods-slide" v-if="goodsSlideTemp.length > 0">
			<div class="main-width">
				<el-carousel height="280px" :autoplay="false" indicator-position="none" arrow="always">
				    <el-carousel-item v-for="(item,index) in goodsSlideTemp" :key="index">
				      <ul>
				      	<li class="feature-box" v-for="ele in item">
                            <div class="main-goods-box">
	                                <div class="imgbg ">
	                                	<router-link tag="a" class="center-center" :to="{name: 'Detail', query: {goodsId: ele.goodsId}}"><img :src="ele.goodsImage"/></router-link>
	                                </div>                                        
	                                <div class="name">
	                                	<router-link tag="a" class="center-center" :to="{name: 'Detail', query: {goodsId: ele.goodsId}}">
	                                    <h2>{{ele.mainTitle}}</h2>
	                                    <span>{{ele.subtitle}}</span>
	                                    </router-link>
	                                </div>
	                                <div class="price">
	                                    <div class="float-left">
	                                    	<p class="sale-price">￥<span>{{ele.salePrice/100}}</span></p>
	                                    	<p>建议零售价</p>
	                                    </div>
	                                    <div class="float-right">
	                                    	<p>结算价：￥
	                                    		<span v-if="globalIsBill == 0">{{ele.settlementPrice/100}}</span>
	                                    		<span v-else>{{ele.taxSettlementPrice/100}}</span>
	                                    	</p>
	                                    	<p>毛利润：
	                                    		<span v-if="globalIsBill == 0">{{ele.profitMargin}}</span>
	                                    		<span v-else>{{ele.taxProfitMargin}}</span>
	                                    	%</p>
	                                    </div>
	                                </div>
	                            </div>
                        </li>
				      </ul>
				    </el-carousel-item>
				  </el-carousel>
			</div>
		</div>
		<!-- 商品轮播图 end -->

		<!-- 品牌特卖 start -->
		<div class="main-brand-goods" v-if="brandGoods.length > 0">
			<div class="main-width">
					<div class="brand-goods-l">
						<router-link tag="a" v-if="brandGoods.bigImg.type == 1" :to="{name: 'Detail', query: {goodsId: brandGoods.bigImg.activity}}"><img :src="imgAddress + brandGoods.bigImg.image" @error="error(2)"></router-link>
						<a v-else-if="brandGoods.bigImg.type == 3" :href="brandGoods.bigImg.activity">
		      				<img :src="brandGoods.bigImg.image" @error="error(2)">
		      			</a>
		      			<a v-else>
		      				<img :src="brandGoods.bigImg.image" @error="error(2)">
		      			</a>
					</div>
					<div class="brand-goods-r">
						<ul>
							<li v-for="item in brandGoods.smallImg">
								<router-link tag="a" v-if="item.type == 1" :to="{name: 'Detail', query: {goodsId: item.activity}}"><img :src="imgAddress + item.image" @error="error(2)"></router-link>
								<a v-else-if="item.type == 3" :href="item.activity">
				      				<img :src="item.image" @error="error(2)">
				      			</a>
				      			<a v-else>
				      				<img :src="item.image" @error="error(2)">
				      			</a>
							</li>
						</ul>
					</div>
			</div>
		</div>
		<!-- 品牌特卖 end -->

		<!-- 商品楼层 start -->
		<div class="main-floor" v-if="homeFloor.length > 0" v-for="item in homeFloor">
			<div class="main-width">
				<div class="floor-header">
				<span class="floor-num" :style="{'text-indent': item.floor<10 ? '7px' : '3px'}">{{item.floor}}F</span>
					<span class="floor-title">{{item.floorName}}</span>
					<span class="i_mores float-right">
						<a :href="ele.value" v-for="ele in item.headLabel">{{ele.key}}</a>
					</span>
				</div>
				<div class="content">
			    	<div class="fresh_left" :style="{background: item.panelColor}">
			        	<div class="fre_ban">
			                <el-carousel height="340px" :interval="item.interval" indicator-position="none" arrow="always">
							    <el-carousel-item v-for="(ele,idx) in item.sowingMap" :key="idx">
							      <a :href="ele.value"><img :src="ele.key" alt=""></a>
							    </el-carousel-item>
							  </el-carousel> 
			            </div>
			            <div class="fresh_txt">
			            	<div class="fresh_txt_c">
			                	<a :href="ele.value" v-for="ele in item.footLabel">{{ele.key}}</a>
			                </div>
			            </div>
			        </div>
			        <div class="fresh_mid">
			        	<ul>
			            	<li class="feature-box" v-for="ele in item.homeGoods">
			                	<div class="main-goods-box">
	                                <div class="imgbg ">
	                                	<router-link tag="a" class="center-center" :to="{name: 'Detail', query: {goodsId: ele.goodsId}}"><img :src="ele.goodsImage"/></router-link>
	                                </div>                                        
	                                <div class="name">
	                                	<router-link tag="a" class="center-center" :to="{name: 'Detail', query: {goodsId: ele.goodsId}}">
	                                    <h2>{{ele.mainTitle}}</h2>
	                                    <span>{{ele.subtitle}}</span>
	                                    </router-link>
	                                </div>
	                                <div class="price">
	                                    <div class="float-left">
	                                    	<p class="sale-price">￥<span>{{ele.salePrice/100}}</span></p>
	                                    	<p>建议零售价</p>
	                                    </div>
	                                    <div class="float-right">
	                                    	<p>结算价：￥
	                                    		<span v-if="globalIsBill == 0">{{ele.settlementPrice/100}}</span>
	                                    		<span v-else>{{ele.taxSettlementPrice/100}}</span>
	                                    	</p>
	                                    	<p>毛利润：
	                                    		<span v-if="globalIsBill == 0">{{ele.profitMargin}}</span>
	                                    		<span v-else>{{ele.taxProfitMargin}}</span>
	                                    	%</p>
	                                    </div>
	                                </div>
	                            </div>
			                </li>
			            </ul>
			        </div>
			        <div class="fresh_right">
			        	<ul>
			            	<li class="center-center"><a :href="item.rightImageOne.value"><img :src="item.rightImageOne.key" /></a></li>
			            	<li class="center-center"><a :href="item.rightImageTwo.value"><img :src="item.rightImageTwo.key" /></a></li>
			            </ul>
			        </div>
			    </div>
			</div>
		</div>
		<!-- 商品楼层 end -->

		<!-- 推荐品牌 start -->
		<!-- <div>
			<div class="main-width">
				<div class="main-brand-line"></div>
				<ul class="main-active-list">
					<li class="main-active-item" v-for="item in brand">
						<div>
							<router-link tag="a" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: item.brandId }}"><img :src="imgAddress + item.logoPath" @error="error(3)" /></router-link>
						</div>
					</li>
				</ul>
			</div>
		</div> -->
		<!-- 推荐品牌 end -->

		<!-- 活动商品 start -->
		<!-- <div>
			<div class="main-width">
				<div class="main-active-line"></div>
				<ul class="main-active-list">
					<li class="main-active-item" v-for="item in indexActive">
						<div v-if="item.jumpStyle == 1">
							<a><img :src="imgAddress + item.imagePath" @error="error(3)"/></a>
						</div>
						<div v-else-if="item.jumpStyle == 2">
							<router-link tag="a" :to="{name: 'Detail', query: {goodsId: item.jumpTo}}"><img :src="imgAddress + item.imagePath" @error="error(3)"/></router-link>
						</div>
						<div v-else-if="item.jumpStyle == 3">
							<a :href="item.jumpTo"><img :src="imgAddress + item.imagePath" @error="error(3)"/></a>
						</div>
						<div v-else>
							<a><img :src="imgAddress + item.imagePath" @error="error(3)"/></a>
						</div>
					</li>
				</ul>
			</div>
		</div> -->
		<!-- 活动商品 end -->

	</div>
</template>
<script>
	import store from '../store/index.js'
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.css'
	import {layout, swiperApi, enterInfo, category, brand, indexActive, imgAddress, homeFloor} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import router from '../router/index.js'

	export default {
		data(){
			return {
				categoryData: {},
				popupData: {},
				isActive: true,
				accountInfo: {
    				account: store.state.account,
	    			enterBrandCount: '',
	    			enterPlatformCount: '',
	    			enterSKUCount: ''
    			},
    			brand: {},
    			indexActive: {},
    			imgAddress: imgAddress,
    			logoPath: store.state.logoPath,
    			sliders: {},
    			goodsSlide: {}, // 商品轮播数据
    			brandGoods: {
    				bigImg: {},
    				smallImg: []
    			}, // 品牌商品数据
    			homeFloor: [], // 楼层商品数据
    			userId: store.state.userId,
    			logo: [
    				{
    					path: require("../assets/img/jinkouhuoyuan@2x.png")
    				},
    				{
    					path: require("../assets/img/pinpaizhixiao@2x.png")
    				},
    				{
    					path: require("../assets/img/quanqiubida@2x.png")
    				},
    				{
    					path: require("../assets/img/shouhouwuyou@2x.png")
    				},
    				{
    					path: require("../assets/img/yijiandaifa@2x.png")
    				}
    			],
    			arowDisplay: false,
    			colorMain: store.state.colorMain,
    			appId: store.state.appId,
    			floorInterval: [1500,2000,2500,3000],
    			floorPageNum: 1,
    			floorPageSize: 10,
    			floorFlag: true,
    			scrollDisable: false
			}
		},
		computed: {
	      	globalIsBill() {
	      		return this.$store.state.isBill
	      	},
	      	goodsSlideTemp () {
                var goodsSlide = this.goodsSlide;
                var goodsSlide_length = goodsSlide.length;
         
                var arrTemp = [];
                var index = 0;
                var sectionCount = 5;

                if(goodsSlide_length > 0){
	                for (var i = 0; i < goodsSlide_length; i++) {
	                    index = parseInt(i / sectionCount);
	                    if (arrTemp.length <= index) {
	                        arrTemp.push([]);
	                    }
	                    arrTemp[index].push(goodsSlide[i]);
	                }
                }

                return arrTemp;
            }
		},
		mounted(){
			this.swiperInit();
			this.brandInit();
			this.enterInfoInit();
			this.categoryInit();
			this.activeInit();	
			this.goodsSlideInit(); // 商品列表轮播
			this.brandGoodsInit(); // 品牌商品
			this.floorInit();	// 获取首页楼层数据
			window.addEventListener('scroll', this.handleScroll); // 滚动加载更多
		},
		methods: {
			popupInit(id){
		    		var categoryData = this.categoryData;
		    		for(var i in categoryData){
		    			if(id == categoryData[i].id){
		    				this.popupData = categoryData[i].child;
		    			}
		    		}
		    		this.isActive = false;
		    },
		    popupClose(){
		    		this.isActive = true;
		    },
		    error(num){
				imageError(num, event);
			},
		    brandInit(){
	    		var data = {
	    			userId : this.userId,
	    			count: 15,
	    			platformType: 1
	    		};
	    		var url = brand;
	    		fetch(url, data)
				.then(res => {
                    this.brand = res.data;
                });
		    },
		    enterInfoInit(){
		    	var data = {
		    		userId: this.userId
		    	};
		    	var url = enterInfo;
		    	fetch(url, data)
				.then(res => {
                    this.accountInfo.enterBrandCount = res.data.enterBrandCount;
                    this.accountInfo.enterPlatformCount = res.data.enterPlatformCount;
                    this.accountInfo.enterSKUCount = res.data.enterSKUCount;
                });
		    },
		    categoryInit(){			    		
	    		var data = {
	    			userId : this.userId
	    		};
	    		var url = category;
	    		fetch(url, data)
				.then(res => {
                    this.categoryData = res.data;
                });			    		
			},
			swiperInit(){
				var data = {
					userId: this.userId,
					indexPosition: 0
				};
				var url = swiperApi;
				fetch(url, data)
				.then(res => {
                    this.sliders = res.data;
                    if(this.sliders.length > 1){
                    	var mySwiper = new Swiper(this.$refs.slider, {
							pagination: '.swiper-pagination',
					        nextButton: '.swiper-button-next',
					        prevButton: '.swiper-button-prev',
					        slidesPerView: 1,
					        paginationClickable: true,
					        loop: true,
					        autoplay: 2500,
					        observer: true 
						});
                    }else{
                    	this.arowDisplay = true
                    }
                    
                });	
			},
			activeInit(){
	    		var data = {
	    			count: 5,
	    			moduleType: 1,
	    			platformType: 1,
	    			userId : this.userId
	    		};
				var url = indexActive;
				fetch(url, data)
				.then(res => {
                    this.indexActive = res.data;                   
                });	
	    	},
	    	// 品牌商品
	    	brandGoodsInit(){
	    		var that = this;
	    		var data = {
					userId: this.userId,
					indexPosition: 1
				};
				var url = swiperApi;
				fetch(url, data)
				.then(res => {
					var brandGoodsData = res.data;
					that.brandGoods.length = brandGoodsData.length;

					if(that.brandGoods.length > 0){
						that.brandGoods.bigImg = brandGoodsData[0];
						that.brandGoods.smallImg = [];

						for (var i = 0; i < that.brandGoods.length; i++) {
							if(i!=0){
								that.brandGoods.smallImg.push(brandGoodsData[i]);
							}
						}
					}

				});
	    	},
	    	// 商品列表轮播
	    	goodsSlideInit(){
	    		var that = this;
				var data = {
					appId : that.appId,
	    			pageNum : that.floorPageNum,
	    			pageSize : that.floorPageSize,
	    			userId : that.userId,
	    			selectType: 1
	    		};
				var url = homeFloor;
				fetch(url, data)
				.then(res => {
					var homeGoods = res.data[0].homeGoods;
					if(homeGoods.length > 0){
						that.goodsSlide = res.data[0].homeGoods; 
					}          
                });
	    	},
	    	// 获取首页楼层数据
	    	floorInit(){
	    		var that = this;
	    		if(!this.scrollDisable && this.floorFlag) {

		    		// 开始加载数据，就不能再次触发这个函数了
	  				that.scrollDisable = true;

					var data = {
						appId : that.appId,
		    			pageNum : that.floorPageNum,
		    			pageSize : that.floorPageSize,
		    			userId : that.userId,
		    			selectType: 0
		    		};
					var url = homeFloor;
					fetch(url, data)
					.then(res => {
	                    var homeFloorData = res.data;   
	                    var homeFloor_length = homeFloorData.length;

	                    if(homeFloor_length > 0){
	                    	var floorInterval_length = that.floorInterval.length;
	                    	for (var i = 0; i < homeFloor_length; i++) {
		                    	homeFloorData[i].footLabel = JSON.parse( homeFloorData[i].footLabel );
		                    	homeFloorData[i].headLabel = JSON.parse( homeFloorData[i].headLabel );
		                    	homeFloorData[i].rightImageOne = JSON.parse( homeFloorData[i].rightImageOne );
		                    	homeFloorData[i].rightImageTwo = JSON.parse( homeFloorData[i].rightImageTwo );
		                    	homeFloorData[i].sowingMap = JSON.parse( homeFloorData[i].sowingMap );  


		                    	homeFloorData[i].interval = that.floorInterval[Math.floor(Math.random()*floorInterval_length)]

		                    	that.homeFloor.push(homeFloorData[i]);
		                    	that.floorFlag = true;
		                    	that.scrollDisable = false;
		                    };
		                    
		                    ++that.floorPageNum;

	                    }else{
							that.floorFlag = false;
							that.scrollDisable = true;
	                    }

	                    
	                                
	                });

					

				}

	    	},
	    	handleScroll(){
	    		var that = this;
	    		var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		        var innerHeight = window.innerHeight;
		        var clientHeight = document.body.clientHeight;
 
			  	if(parseInt(scrollTop + innerHeight) >= clientHeight) {
		        	// 触发加载数据 
		        	that.floorInit();      
		    	}
	    	},
	    	layout(){
	    		var data = {
	    			userId: this.userId
	    		};
	    		var url = layout;
	    		fetch(url, data)
				.then(res => {
                    if(res.code == 10000){
                    	router.push('/');
                    }else{
                    	var str = "退出登录失败";
						toast(str, 2, false);
                    }                
                });
	    	},
	    	handleClick(tab, event) {
		        console.log(tab, event);
		    }
		}
	}
</script>
<style scoped>
	@import '../assets/css/swiper.min.css'

  	.swiper-container {
		width: 100%;
		height: 100%;
	}
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.swiper-slide img {
		width: 750px;
		height: 290px;
	}
</style>